<template>
  <div class="time-pick-range">
    <div v-if="ruleType == '1' " class="time-picker1">
      <el-date-picker
        v-model="value"
        type="daterange"
        :range-separator="$t('common.base.to')"
        :start-placeholder="$t('common.contract.list.effectiveDate')"
        :end-placeholder="$t('common.contract.list.expirationDate')"
        value-format="timestamp"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="datePickeroptions"
        @change="change"
        >
      </el-date-picker>
    </div>
    <div v-else-if="ruleType == '2' " class="time-picker2">
      <el-date-picker
        v-model="value[0]"
        type="date"
        :placeholder="$t('common.contract.list.effectiveDate')"
        value-format="timestamp"
        :picker-options="datePickeroptions"
        @change="changeStart"
        default-time="00:00:00"
      >
      </el-date-picker>
      <span class="time-separate">{{ $t('common.base.to') }}</span>
      <el-date-picker
        v-model="value[1]"
        type="date"
        :placeholder="$t('common.contract.list.expirationDate')"
        disabled
        value-format="timestamp"
        default-time="23:59:59"
        format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <div v-else>
      {{ $t('common.member.permanentValidity') }}
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import FormMixin from '@src/component/form/mixin/form';
import { safeNewDate } from '@src/util/time';
export default {
  name: 'time-pick-range',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    ruleType: {
      type: String,
      default: ''
    },
    expireDate: {
      type: Number,
      default: 1
    },
    dateUnit: {
      type: String,
      default: 'year'
    }
  },
  data() {
    return {
      datePickeroptions: {
        disabledDate(time) {
          return time.getTime() < safeNewDate(safeNewDate().toLocaleDateString()).getTime()
        }
      }
    };
  },
  methods: {
    change(newValue) {
      this.$emit('update', { newValue, oldValue: this.value, field: this.field });
    },
    changeStart(val){
      let value2 = dayjs(val).add(this.expireDate, this.dateUnit).add(1, 'day').subtract(1, 'second').valueOf()
      let newValue = [val, value2]
      console.log(newValue, this.value, this.field)
      this.$emit('update', { newValue, oldValue: this.value, field: this.field });
    }
  },
};
</script>

<style lang="scss" scoped>
.time-pick-range {
  width: 100%;
  .time-picker2 {
    width: 100%;
    display: flex;
    .time-separate {
      margin: 0 5px;
    }
  }
}
</style>
